<template>
  <scroll-view @scrolltolower="handleToLower" class="recommend_view" scroll-y v-if="recommends.length > 0">
    <!-- 推荐 -->
    <view class="recommend_wrap">
      <view class="recommend_item" v-for="(item, i) in recommends" :key="i">
        <go-detail :list="recommends" :monthIndex="i">
          <image mode="aspectFill" :src="item.thumb"></image>
        </go-detail>
      </view>
    </view>
    <!-- 月份 -->
    <view class="month_wrap">
      <!-- 头部 -->
      <view class="month_title">
        <view class="month_title_info">
          <view class="title_info">
            <text>{{ monthes.DD }}</text>
            <text> / {{ monthes.MM }}月</text>
          </view>
          <view class="title_text">你负责美丽就好！</view>
        </view>
        <view class="month_title_more">更多 > </view>
      </view>
      <!-- 内容 -->
      <view class="month_content">
        <view class="month_item" v-for="(item, index) in monthesItem" :key="index">
          <go-detail :list="monthesItem" :monthIndex="index">
            <image mode="aspectFill" :src="item.thumb"></image>
          </go-detail>
        </view>
      </view>
    </view>

    <!-- 热点 start -->
    <view class="hots_wrap">
      <view class="hots_title">
        <text>热门</text>
      </view>
      <view class="hots_content">
        <view class="hots_item" v-for="(item, i) in hots" :key="i">
          <go-detail :list="hots" :monthIndex="i">
            <image mode="aspectFill" :src="item.thumb"></image>
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 热点 end -->
  </scroll-view>
</template>

<script>
import moment from "moment";
import goDetail from "../../../components/goTetail.vue";
export default {
  components: {
    goDetail,
  },
  data() {
    return {
      monthes: {},
      recommends: [],
      monthesItem: [],
      hots: [],
      params: {
        limit: 20,
        adult: false,
        skip: 0,
        first: 0,
        order: "new",
      },
      hasMore: true,
    };
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: "首页",
    });
    this.getList();
  },
  methods: {
    // 获取接口数据
    getList() {
      this.request({
        url: "http://service.picasso.adesk.com/v1/vertical/vertical",
        data: this.params,
      }).then((res) => {
        console.log(res);
        let images = res.data.res.vertical;
        if (images.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "没有更多了",
            icon: "none",
          });
          return;
        }
        if (this.recommends.length === 0) {
          this.recommends = images.slice(0, 4);
          this.monthesItem = images.slice(4, 10);
          this.hots = images.slice(10);
          var t = res.header.Date;
          this.monthes.MM = moment(t).format("MM");
          this.monthes.DD = moment(t).format("DD");
        }
        this.hots = [...this.hots, ...images];
      });
    },
    // 触底操作
    handleToLower() {
      console.log("daodile");
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "没有更多了",
          icon: "none",
        });
      }
    },
  },
  computed: {},
};
</script>

<style lang="scss">
.recommend_view {
  height: calc(100vh - 36px);
}
.recommend_wrap {
  padding: 0 5rpx;
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    width: 50%;
    padding: 5rpx;
  }
}
.month_wrap {
  padding: 0 5rpx;
  .month_title {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    padding: 30rpx;
    .month_title_info {
      display: flex;
      align-items: center;
      .title_info {
        color: $color;
        text {
          &:nth-child(1) {
            font-size: 36rpx;
            margin-right: 10rpx;
          }
          &:nth-child(2) {
            font-size: 28rpx;
          }
        }
      }
      .title_text {
        font-size: 30rpx;
        margin-left: 50rpx;
      }
    }
    .month_title_more {
      color: $color;
    }
  }
  view.month_content {
    display: flex;
    flex-wrap: wrap;
    view.month_item {
      width: 33.33%;
      padding: 5rpx;
    }
  }
}
.hots_wrap {
  padding: 0 5rpx;
  .hots_title {
    padding: 30rpx 0 10rpx 0;
    text {
      font-size: 30rpx;
      font-weight: 600;
      border-left: 15rpx solid $color;
      padding-left: 20rpx;
    }
  }
  .hots_content {
    display: flex;
    flex-wrap: wrap;
    .hots_item {
      width: 50%;
      padding: 5rpx;
    }
  }
}
</style>
